const Modal = React.createClass({

    render(){
        return (
            <div>
                <div className="modal fade in" style={{display: (this.props.open ? 'block' : 'none')}}>
                    <div className="modal-dialog">
                        <div className="modal-content">
                            {this.props.children}
                        </div>
                    </div>
                </div>
                {(this.props.open ? <div className="modal-backdrop fade in"></div> : '')}
            </div>
        )
    }
});

const Header = React.createClass({
    propTypes: {
        onclose: React.PropTypes.func,
    },
    render(){
        return (
            <div className="modal-header">
                <button type="button" className="close" onClick={()=> {
                    this.props.onclose()
                }}><span>×</span><span
                    className="sr-only">关闭</span></button>
                <h4 className="modal-title" id="myModalLabel">{this.props.children}</h4>
            </div>
        );
    }
})
const Body = React.createClass({
    render(){
        return (
            <div className="modal-body">
                {this.props.children}
            </div>
        );
    }
})
const Footer = React.createClass({

    getDefaultProps(){
        return {
            onconfirm: function () {

            },
            onclose: function () {

            }
        }
    },
    render(){
        return (
            <div className="modal-footer">
                <button type="button" className="btn btn-default" onClick={()=> {
                    this.props.onclose();
                }}>
                    关闭
                </button>
                <button type="button" className="btn btn-primary" onClick={()=> {
                    this.props.onconfirm();
                }}>确定
                </button>
            </div>
        );
    }
});
Modal.Header = Header;
Modal.Body = Body;
Modal.Footer = Footer;
export default Modal;
